<template>
	<div class="left-box">
		<div class="heade-wrapper">
			<a-input-group compact style="display: flex;">
				<a-select
					v-model="applicationCategory"
					class="heade-left-box"
					@change="applicationCategoryChangeHandle"
					:disabled="unallowedChangeBusinessAccount"
				>
					<a-select-option
						v-for="item of options"
						:key="item.applicationCategory"
						:value="item.applicationCategory"
					>
						{{ item.name }}
					</a-select-option>
				</a-select>
				<a-input-search
					class="heade-right-box"
					:placeholder="this.$i18n('selectPeople.input',this.$i18n('selectPeople.app.property.label'))"
					v-model.trim="searchValue"
					@search="searchHandle"
				>
				</a-input-search>
			</a-input-group>
		</div>

		<top-bottom-layout class="content-wrapper">
			<template #top>
				<scroll-list
					panel="AppProperty"
					command="fieldList"
					ref="teamList"
					:initSearchValue="teamSearchCondition"
					:singleAndMult="true"
					:checkAllShow="false"
					iconType="cap-icon-alternative-post"
					@toCheckValueClickProp="getTeamValueClickPropHandle"
				/>
			</template>
			<template #middle></template>
			<template #bottom>
				<scroll-list
					panel="AppProperty"
					command="roleList"
					ref="peopleList"
					:otherProps="peopleOtherProps"
					:titleProps="peopleTitleProps"
					:firstLoadSearch="peopleFirstLoad"
				/>
			</template>
		</top-bottom-layout>
	</div>
</template>

<script>
import scrollList from '@/components/scrollList';
import topBottomLayout from '@/components/topBottomLayout';

export default {
	name: 'AppProperty',
	components: { scrollList, topBottomLayout },
	inject: ['app'],
	data() {
		return {
			searchValue: '',
			selectAccountId: '',
			fieldId: '',
			peopleFirstLoad: false,
			teamSearchCondition: {},
			teamTitleProps: {},
			peopleOtherProps: [],
			peopleTitleProps: { fieldName: this.$i18n('selectPeople.input',this.$i18n('selectPeople.app.property.label')) },
			options: [],
			applicationCategory: ''

		};
	},
	watch: {},
	computed: {
		unallowedChangeBusinessAccount() {
			return this.app().orgSelect.unallowedChangeBusinessAccount;
		}
	},
	created() {
	},
	beforeMount() {
		console.log('beforeMount');
		const { defaultAccountId, panels } = this.app().orgSelect;
		this.selectAccountId = defaultAccountId;
		const appList = panels.find((item) => item.name === 'AppProperty').extInfo
			.appList;
		this.options = appList;
		if (appList.length) {
			this.applicationCategory = appList[0].applicationCategory;
		}
		this.teamSearchCondition = {
			accountId: defaultAccountId,
			applicationCategory: this.applicationCategory
		};
	},
	methods: {
		initProps() {
			this.searchValue = '';
			this.fieldId = '';
			this.peopleFirstLoad = false;
		},
		onChangeAccount(ret) {
			console.log('applink===>', data);
			this.initProps();
			this.$refs.peopleList.initProps(); // 人员清空
			this.selectAccountId = ret.id;
			this.searchHandle();
		},
		applicationCategoryChangeHandle(value) {
			this.initProps();
			this.$refs.peopleList.initProps(); // 人员清空
			this.searchHandle();
		},
		searchHandle() {
			this.fieldId = '';
			this.peopleFirstLoad = false;
			this.$refs.peopleList.initProps(); // 人员清空
			this.$refs.teamList.search({
				accountId: this.selectAccountId,
				keyword: this.searchValue,
				applicationCategory: this.applicationCategory
			});
		},
		getTeamValueClickPropHandle(value) {
			this.fieldId = value.id;
			this.peopleSearchHandle();
		},
		peopleSearchHandle() {
			this.peopleFirstLoad = true;
			this.$refs.peopleList.search({
				fieldId: this.fieldId,
				applicationCategory: this.applicationCategory,
				accountId: this.selectAccountId
			});
		}
	}
};
</script>

<style lang="scss" scoped>
</style>
